import {
  // AmcaxForm,
  BaseCommand,
  // CommandDialog,
  ICmdDialogParams,
} from '@amcax/base';

// import { renderer } from '@app-cad/common/utils';

// import {
//   sketchEventCenter,
//   USER_EVENTS,
// } from '@app-cad/environments/nextcad/events/SketchEventCenter';
// import { wsApi } from '@app-cad/server';
// import { RJSFSchema, UiSchema } from '@rjsf/utils';
// import validator from '@rjsf/validator-ajv8';
import i18n from 'i18next';
import { useEffect, useRef } from 'react';
import { CmdInteractor } from './CmdInteractor';

function PointCommand({ onClose }: ICmdDialogParams) {
  // const [xPonit, setXPoint] = useState(0);
  // const [yPonit, setYPoint] = useState(0);

  const cmdRef = useRef<CmdInteractor>(null);
  // const schema: RJSFSchema = {
  //   type: 'object',
  //   properties: {
  //     x: { type: 'number', title: 'x坐标', default: 0 },
  //     y: { type: 'number', title: 'y坐标', default: 0 },
  //   },
  // };
  // const formItemLayout = {
  //   labelCol: { span: 4 },
  //   wrapperCol: { span: 20 },
  // };
  useEffect(() => {
    cmdRef.current = new CmdInteractor();
    cmdRef.current.addExit(onClose);
    // sketchEventCenter().on(USER_EVENTS.POINTPOSITION, onPointData);
    return () => {
      cmdRef.current?.destroy();
      cmdRef.current = null;
      // sketchEventCenter().off(USER_EVENTS.POINTPOSITION, onPointData);
    };
  }, []);
  // const onPointData = (data) => {
  //   setXPoint(Number(data.xPoint.toFixed(3)));
  //   setYPoint(Number(data.yPoint.toFixed(3)));
  // };

  // const uiSchema: UiSchema = {
  //   'ui:submitButtonOptions': {
  //     submitText: '执行',
  //     props: {
  //       disabled: false,
  //       className: 'btn',
  //       type: 'primary',
  //     },
  //   },
  //   'ui:options': {
  //     classNames: 'cmd-sketch-form',
  //   },
  //   x: {
  //     'ui:widget': 'amcaxInputNumber',
  //     'ui:options': {
  //       unit: 'mm',
  //     },
  //   },
  //   y: {
  //     'ui:widget': 'amcaxInputNumber',
  //     'ui:options': {
  //       unit: 'mm',
  //     },
  //   },
  // };
  // const onSubmit = async (data) => {
  //   const sketchId = cmdRef.current.sketchId;
  //   const res = await wsApi.createSketchPoint(sketchId, {
  //     point: [data.formData.x, data.formData.y],
  //   });
  //   onClose();
  //   renderer(sketchId, res);
  // };

  return (
    <>
      {/* <CommandDialog
        title={title}
        placement='topLeft'
        className='sketchDialog'
        onClose={() => {
          onClose();
        }}>
        <AmcaxForm
          formContext={formItemLayout}
          schema={schema}
          uiSchema={uiSchema}
          validator={validator}
          onSubmit={onSubmit}
          formData={{ x: xPonit, y: yPonit }}
        />
      </CommandDialog> */}
    </>
  );
}

export const cmdPoint: BaseCommand = {
  id: 'CmdPoint',
  label: 'command.point',
  icon: 'commands/sketch/point',
  group: 'sketch',
  create: (label: string, onClose: () => void) => (
    <PointCommand
      title={i18n.t(label)}
      onClose={onClose}
    />
  ),
};
